<template>
  <div class="collapse_container" v-loading="loading">
    <el-collapse v-if="list.length>0" @change="changeStatus(activeName)" v-model="activeName">
      <el-collapse-item class="mb_10" :name="item.id" v-for="(item,index) in list" :key="index">
        <template slot="title">
          <div class="collapse_solt">
            <div class="title_txt"><div v-if="item.readStatus==0" class="color_red"></div> {{ item.title }}  </div>
            <div class="title_time">{{ item.createTime | formatTime  }}</div>
          </div>
        </template>
        <div class="collapse_content">{{ item.content }}</div>
      </el-collapse-item>
    </el-collapse>
    <div v-if="list.length==0">
      <el-empty description="暂无消息~" :image-size="200"></el-empty>
    </div>
  </div>
</template>

<script>

export default {
  name: "messageList",
  props:{
    list: {
      type: [Array],
      default: [],
    },
    loading: {
      type: [Boolean],
      default: true,
    },
  },
  watch:{

  },
  filters:{
    formatTime(val){
      if (!val){
        return ''
      }
      let date = new Date(val)
      let year = date.getFullYear()
      let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
      return date
    },
  },
  data(){
    return{
      activeName: ''
    }
  },
  methods:{
    changeStatus(id){
      if (id.length>0&&id[id.length-1]){
        for (const listElement of this.list) {
          if (listElement.id==id[id.length-1]){
            if (listElement.readStatus==0){
              this.$emit('changeReadStatus',id[id.length-1])
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.collapse_solt{
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    .title_txt{
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 400;
      color: #383838;
    }
    .title_time{
      font-size: 12px;
      font-weight: 400;
      color: #A6A6A6;
      margin-right: 4px;
    }
  }
.collapse_content{
  font-size: 12px;
  font-weight: 400;
  color: #A6A6A6;
  margin-bottom: 10px;
}
.color_red{
  background: red;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 4px;
}
.mb_10{
  margin-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}
.collapse_container{
  width: 100%;
  height: calc(100% - 52px);
  overflow: auto;
}
</style>
